<template>
  <!-- 产品管理 分页 -->
  <div class="productLists">
    <!-- 卡片 -->
    <div>
      <el-row>
        <el-col :span="6" v-for="(item, index) in imageList" :key="index">
          <productImage
            v-if="item.type === 'image'"
            class="image-unit"
            :isChoosed="getChoosed(index)"
            @click.native="unitClick(index)"
          >
            <div class="image-preview" slot="image-preview" @click="getImageDetail"></div>
            <div slot="sx">357*337</div>
          </productImage>
          <productFile
            v-else
            class="image-unit"
            :isChoosed="getChoosed(index)"
            @click.native="unitClick(index)"
          >
            <div slot="sx">12.8k</div>
          </productFile>
        </el-col>
      </el-row>
    </div>
    <!-- 分页 -->
    <div class="pro-pagination">
      <el-pagination
        background
        layout="prev, pager, next, total, jumper"
        :total="1000"
        small
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import productImage from "@/components/productInfo/productImage.vue";
import productFile from "@/components/common/productFile.vue";
export default {
  components: {
    productImage,
    productFile,
  },
  props: {
    imageList: {
      default: () => [
        {
          id: 0,
          type: "image",
        },
        {
          id: 0,
          type: "file",
        },
        {
          id: 0,
          type: "file",
        },
        {
          id: 0,
          type: "image",
        },
        {
          id: 0,
          type: "image",
        },
        {
          id: 0,
          type: "image",
        },
        {
          id: 0,
          type: "file",
        },
        {
          id: 0,
          type: "image",
        },
        {
          id: 0,
          type: "image",
        },
        {
          id: 0,
          type: "file",
        },
        {
          id: 0,
          type: "image",
        },
        {
          id: 0,
          type: "image",
        },
        {
          id: 0,
          type: "file",
        },
        {
          id: 0,
          type: "image",
        },
        {
          id: 0,
          type: "file",
        },
      ],
    },
    selectedTabId: {
      default: () => "image",
    },
  },
  data() {
    return {
      choosedUnit: [],
    };
  },
  methods: {
    getChoosed(index) {
      const list = this.choosedUnit.filter((item) => item === index);
      return list.length !== 0;
    },
    unitClick(index) {
      const list = this.choosedUnit.filter((item) => item === index);
      if (list.length !== 0) {
        this.choosedUnit = this.choosedUnit.filter((item) => item !== index);
      } else {
        this.choosedUnit.push(index);
      }
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
     // 详情
    getImageDetail(e) {
      console.log("详情", e);
      // 取消向上冒泡事件
      e.stopPropagation();
      
    },
  },
};
</script>

<style lang="scss">
.productLists {
  @import "~@/styles/mixin.scss";
  padding: 0.2rem 0.2rem 0;
  .image-unit {
    position: relative;
    .image-preview {
      position: absolute;
      top: 1.2rem;
      right: 0.4rem;
      width: 0.22rem;
      height: 0.22rem;
      background-image: url(~@/assets/images/enlarge@2x.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-position: center;
      cursor: pointer;
    }
  }
  .pro-pagination {
    text-align: right;
    margin-top: 0.1rem;
    .el-pagination.is-background .el-pager li:not(.disabled).active {
      background-color: #2acaff;
      color: #ffffff;
    }
    .el-pagination.is-background .btn-prev,
    .el-pagination.is-background .btn-next,
    .el-pagination.is-background .el-pager li {
      background-color: #034475;
    }
    .el-pagination--small .el-pagination__editor.el-input .el-input__inner {
      background: #034475;
      border: 0px;
    }
    .el-pagination--small span:not([class*="suffix"]),
    .el-pagination--small button {
      color: #034475;
      margin-left: 0.2rem;
    }
  }
}
</style>